<script setup>
import {ref,watch} from 'vue'
import { useUserStore } from '@/stores';
import axios from 'axios';
const divalue = ref('')//选择器的绑定值
const inputValue = ref('')//搜索框绑定值
const tableData = ref([])//选课总数据
const searchArray = ref([])//搜索过滤后的数据
const dividingData = ref([])//选择过滤后的数据
const myData = ref([])//用户已选选课的数据
let timeData = []//用户课程的时间
//选择器的选项
const options = [
  {
    value: '文科',
    label: '文科',
  },
  {
    value: '理科',
    label: '理科',
  },
  {
    value: '工科',
    label: '工科',
  },
  {
    value: '社会',
    label: '社会',
  },
  {
    value: '国防',
    label: '国防',
  },
]

const totalGrade = ref(0)//用户已选课程的总学分
const userStore = useUserStore()//导入用户仓库


//获取所有课程数据
const getLessons = () => {
  axios.get('http://localhost:3000/lessons').then(res => {
    tableData.value = res.data
    //console.log(res.data)
})}
getLessons()
//获取用户已选课程数据
const getMyLessons = () => {
  axios.get('http://localhost:3000/mylessons').then(res => {
  myData.value = res.data 
  timeData = res.data.map(function(ele,index){
    return ele.time
  })
  console.log(timeData)
  // console.log(res.data)
  totalGrade.value = res.data.reduce((prev,currnet) => {
  return prev + currnet.grade
    },0)
  //console.log(totalGrade.value)
  })
}
getMyLessons()
//判断当前行的课程是否已选
function isSelected(row,$index){
  for(let i = 0;i<myData.value.length;i++){
    if(myData.value[i].name == row.row.name){
      // console.log(true)
      return true
    }  
  }
  // console.log(false)
  return false
}
//选课功能
const select = async (row,$index) => {
  if((totalGrade.value +row.row.grade <= 20) ){
    if(!timeData.includes(row.row.time)){
      const obj = {
      id:row.row.id,
      name:row.row.name,
      time:row.row.time,  
      place:row.row.place,
      teacher:row.row.teacher,
      grade:row.row.grade,
      class:row.row.class,
      }
      await axios({
        url:'http://localhost:3000/mylessons',
        method:'post',
        data:obj,
      })
      getMyLessons()
      ElMessage({
        type: 'success',
        message: '选课成功',
      })
    }else{
      ElMessage.error('时间冲突')
    }
  }else{
    ElMessage.error('课程学分超过20')
  }
}
//取消选课功能
const cancel = async (row,$index)  => {

  await axios.delete('http://localhost:3000/mylessons/'+row.row.id)
  getMyLessons()
  ElMessage({
    type: 'success',
    message: '退课成功',
  })
}
//查看简介功能
const check = (row,$index) => {
  const str =`${row.row.name}，一个${row.row.class}课程`
  ElMessageBox.confirm(
    str,
    '简介',
    {
      confirmButtonText: '了解',
      cancelButtonText: '返回',
    }
  )
}
//搜索过滤功能
const searchLesson = (inputValue) =>{
  searchArray.value = tableData.value.filter(item => {
    if(item.name.includes(inputValue)||item.teacher.includes(inputValue)){
      return item
    }else{
      return undefined
    }
  }) 
  console.log(searchArray.value)
}
//选择过滤功能
const divideLesson= (dividingValue) =>{
    dividingData.value = tableData.value.filter(item => {
      if(item.class.includes(dividingValue)){
        return item
      }else{
        return undefined
      }
    })
    console.log(dividingData.value)
}
watch(divalue,(newValue,oldValue) =>{
    if(!newValue){
      divideLesson('')
    }
})






</script>

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <el-select
      v-model="divalue"
      placeholder="学科分类"
      size="large"
      style="width: 240px"
      clearable
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        @click="divideLesson(item.value)"
      />
    </el-select>
    <el-input @input="searchLesson(inputValue)" v-model="inputValue" style="width: 240px;height:40;margin-left: 25%;" placeholder="搜索课程" ></el-input>
  </div>
  <el-table :data="searchArray" stripe style="width: 100%" height="63%" v-if="(searchArray.length > 0)&&(inputValue !== '')">
    <el-table-column  prop="id" label="序号" ></el-table-column >  <!-- 如果搜索过滤数组有数据并且输入框有值时才显示搜索过滤表格 -->

    <el-table-column  prop="name" label="课程"></el-table-column >
    <el-table-column  prop="time" label="时间"></el-table-column >
    <el-table-column  prop="place" label="地点"></el-table-column >
    <el-table-column  prop="teacher" label="教师"></el-table-column >
    <el-table-column  prop="grade" label="学分"></el-table-column >
    <el-table-column  prop="class" label="类别"></el-table-column>
    <el-table-column   label="操作">
      <template #default="row,$index">
        <el-button type="danger"  @click="cancel(row,$index)" v-show="isSelected(row,$index)">退课</el-button>
        <el-button type="success" @click="select(row,$index)" v-show="!isSelected(row,$index)">选课</el-button>
        <el-button type="primary"  @click="check(row,$index)">查看简介</el-button>
      </template>
  </el-table-column>
  </el-table>
  <el-table :data="dividingData" stripe style="width: 100%" height="63%" v-else-if="(dividingData.length > 0) || (divalue !== '') ">
    <el-table-column  prop="id" label="序号" ></el-table-column >  <!-- 如果选择过滤数组有数据并且选择器有值时才显示选择过滤表格 -->

    <el-table-column  prop="name" label="课程"></el-table-column >
    <el-table-column  prop="time" label="时间"></el-table-column >
    <el-table-column  prop="place" label="地点"></el-table-column >
    <el-table-column  prop="teacher" label="教师"></el-table-column >
    <el-table-column  prop="grade" label="学分"></el-table-column >
    <el-table-column  prop="class" label="类别"></el-table-column>
    <el-table-column   label="操作">
      <template #default="row,$index">
        <el-button type="danger"  @click="cancel(row,$index)"  v-show="isSelected(row,$index)" >退课</el-button>
        <el-button type="success"  @click="select(row,$index)" v-show="!isSelected(row,$index)" >选课</el-button>
        <el-button type="primary" @click="check(row,$index)">查看简介</el-button>
      </template>
    </el-table-column>
  </el-table> 
  <el-table :data="tableData" stripe style="width: 100%" height="63%" v-else>  <!--全数据表格 -->

    <el-table-column  prop="id" label="序号" ></el-table-column >
    <el-table-column  prop="name" label="课程"></el-table-column >
    <el-table-column  prop="time" label="时间"></el-table-column >
    <el-table-column  prop="place" label="地点"></el-table-column >
    <el-table-column  prop="teacher" label="教师"></el-table-column >
    <el-table-column  prop="grade" label="学分"></el-table-column >
    <el-table-column  prop="class" label="类别"></el-table-column>
    <el-table-column   label="操作">
      <template #default="row,$index">
        <el-button type="danger"  @click="cancel(row,$index)" v-show="isSelected(row,$index)">退课</el-button>
        <el-button type="success" @click="select(row,$index)" v-show="!isSelected(row,$index)">选课</el-button>
        <el-button type="primary"  @click="check(row,$index)">查看简介</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>